<template>
	<view class="list-right">
		<view class="author-img">
			<img class="img" src="/static/head.png" />
			<view class="follow iconfont icon-jiahao" v-show="showFollow" @click="hideFollow"></view>
		</view>
		<view class="right-box">
			<view class="icon iconfont icon-aixin" :class="{fav: isFav}"></view>
			<view class="count">72.2w</view>
		</view>
		<view class="right-box">
			<view class="icon iconfont icon-chat"></view>
			<view class="count">1.8w</view>
		</view>
		<view class="right-box">
			<view class="icon iconfont icon-share"></view>
			<view class="count">6645</view>
		</view>
		<view class="music-img">
			<img class="img" src="/static/music.png" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showFollow: true,
				isFav: false
			};
		},
		methods: {
			hideFollow() { // 隐藏关注加号图标
				this.showFollow = false;
			},
			follow() {
				this.isFav = !this.isFav; // 切换收藏爱心颜色
			}
		}
	}
</script>

<style scoped>
	.list-right {
		width: 60px;
	}

	.author-img {
		width: 60px;
		text-align: center;
	}

	.img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.author-img img {
		border: 2px solid #FFFFFF;
	}

	.right-box {
		margin: 20px auto;
		color: white;
		text-align: center;
		font-size: 12px;
	}

	.icon {
		font-size: 40px;
	}

	.music-img {
		width: 60px;
		height: 51px;
		text-align: center;
		margin-top: 20px;
		animation: around 1.5s linear 0.2s infinite;
	}

	@keyframes around {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.fav {
		color: red;
	}
</style>
